<template>
    <a-form ref='formRef' :label-col='{span : 5}' :model='formData'>
        <a-form-item label='登陆账号' name='account'>
            <a-input type='text' v-model:value='formData.account' disabled />
        </a-form-item>
        <a-form-item label='姓名' name='name'>
            <a-input type='text' v-model:value='formData.name' disabled />
        </a-form-item>
        <a-form-item label='角色' name='roles'>
            <a-select v-model:value="formData.roles" :options="roleOptions"  mode="multiple" style="width: 100%" :field-names="{ label: 'name', value: 'id'}" />
        </a-form-item>
    </a-form>
</template>

<script lang="ts" setup>
    import { saveApi } from '@/api/system/Member';
    import { listApi as roleListApi} from '@/api/system/Role'
    import { ref } from 'vue';

    const props = defineProps<{
        row? : any
    }>()


    const formRef = ref()
    const depts = ref<any[]>([])
    let bakData:any = {}

    const roleOptions = ref<any[]>([])

    
    const formData = ref({
        id : 0,
        account : '',
        name : '',
        roles : [],
    })

    console.log(props.row)


    if(props.row.userRole == 2) {
        formData.value.account = props.row.xh
    }else {
        formData.value.account = props.row.gh
    }

    formData.value.name = props.row.name



    async function submit() {
        let params  = await formRef.value.validate()



        return saveApi({
            roles : params.roles,
            sourceId : props.row.id,
            userRole : props.row.userRole,
            enable : true
        })
    }

    defineExpose({
        submit
    })

    // deptApi().then(r => {
    //     depts.value = recursionFn(r.data, 0, 'id', 'parentId', 'children')
    // })

    roleListApi().then(res => {
        if(res.data) {
            roleOptions.value = res.data
        }
        
    })
</script>